<template>
	<view class="container">
		<navbar title="地址管理"></navbar>
		<view v-if='loadingPage'>
			<load-page></load-page>
		</view>
		<view class="wrap" v-else>
			<view class="address-wrap" v-if='list.length > 0'>
				<view class="address-item" v-for='(item,index) in list' @tap='switchAddress(item)'>
					<view class="address-item-top">
						<view class="concat">
							<view class="concat-name ellipsis">收货人：{{item.name}}</view>
						</view>
						<view class="phone">{{item.phone}}</view>
					</view>
					<view class="address-item-center">{{item.address_detail}}</view>
					<view class='address-item-handle'>
						<view class="default" @tap.stop='setDefault(index)'>
							<uni-icons type="checkbox" color="#999" v-if='!item.is_default'></uni-icons>
							<uni-icons type="checkbox-filled" color="#58BC4D" v-else></uni-icons>
							<text class="text" :style="{color:item.is_default ? '#58BC4D':'#999'}">默认地址</text>
						</view>
						<view class="address-item-handle-btn-wrap">
							<view class="btn edit-btn" @tap.stop='addAddress(2,item.address_id)'>
								<image src='../static/edit.png' mode="aspectFit"></image>
								<text>编辑</text>
							</view>
							<view class="btn edit-btn" @tap.stop='delAddress(item.address_id)'>
								<image src='../static/del.png' mode="aspectFit"></image>
								<text>删除</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="no-data-img">
				<no-data text='还没有地址哦' noDataImg='/static/no-addr.png'></no-data>
			</view>
		</view>

		<view class="footer-wrap">
			<view class="footer line-center" @tap='addAddress(1)'>
				新增地址
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				list: [],
				loadingPage:true,
				fromS:''
			};
		},
		onShow() {
			this.getList()
		},
		onLoad(option) {
			this.fromS = option.fromS ? option.fromS : '';
		},
		methods: {
			getList() {
				const that = this;
				app.globalRequest({
					api: app.getApi().user.addressList,
				}).then(res => {
					that.loadingPage = false;
					if (res.code == 0) {
						res.data.forEach(v => {
							v.is_default = false;
							if (res.default_id == v.address_id) {
								v.is_default = true;
							}
						})
						that.list = res.data;
					}
				})
			},
			addAddress(type, id) {
				uni.navigateTo({
					url: `/pages/user-page/handle-address/handle-address?type=${type}&id=${id}`
				})
			},
			setDefault(index) {
				const that = this;
				const list = this.list
				app.globalRequest({
					api: app.getApi().user.setDefaultAddr,
					method: 'POST',
					data: {
						address_id: list[index].address_id
					}
				}).then(res => {
					if (res.code == 0) {

						list.forEach(v => {
							v.is_default = false;
						})
						list[index].is_default = true;
						that.list = list;
					}
				})
			},
			delAddress(id) {
				const that = this;
				uni.showModal({
					title:'提示',
					content:`确认要删除该地址吗？`,
					cancelText:'我再想想',
					confirmColor:'#5DC751',
					success(res){
						if(res.confirm){
							app.globalRequest({
								api: app.getApi().user.deleteAddr,
								data: {
									address_id: id
								}
							}).then(res => {
								if (res.code == 0) {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										mask: true
									})
									that.getList()
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										mask: true
									})
								}
							})
						}
					}
				})
				
			},
			switchAddress(item) {
				if(!this.fromS){
					return;
				}
				const pages = getCurrentPages(); // 当前页面
				const beforePage = pages[pages.length - 2]; // 前一个页
				beforePage.$vm.addressInfo = item;
				uni.navigateBack({
					delta: 1,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding-bottom: 200rpx;
	}

	.address-wrap {
		margin: 24rpx;

		.address-item {
			padding: 24rpx 24rpx 16rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 24rpx;
		}

		.address-item-top {
			display: flex;

			.concat {
				flex: 1;
				overflow: hidden;

				.concat-name {
					width: 100%;
				}
			}

			.phone {
				font-family: DIN-BOLD;
				position: relative;
				top:30rpx;
			}
		}

		.address-item-center {
			font-size: 24rpx;
			color: #676767;
			padding-top: 16rpx;
			padding-bottom: 16rpx;
		}

		.address-item-handle {
			border-top: 1px solid #DEDBDB;
			padding-top: 14rpx;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;

			.default {
				.text {
					padding-left: 12rpx
				}
			}

			.address-item-handle-btn-wrap {
				display: flex;
				align-items: center;

				.btn {
					display: flex;
					align-items: center;
					color: #999;
					margin-left: 58rpx;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					text {
						padding-left: 12rpx
					}

				}
			}
		}


	}

	.footer-wrap {
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background: $supplier-page-color;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;

		.footer {
			width: 660rpx;
			height: 80rpx;
			background: $supplier-btn-linear-color;
			border-radius: 104rpx 104rpx 104rpx 104rpx;
			color: #fff;
		}
	}
	.no-data-img{
		margin-top:100rpx;
	}
</style>